<template>
  <div class="search_content">
    <div class="search_header">
      <div class="header">
        <div class="icon"><van-icon name="arrow-left" @click="goback" /></div>
        <div class="search">
          <i class="iconfont icon-search icon_"></i>
          <input
            type="text"
            placeholder="请输入内容"
            class="input"
            v-model="keyword1"
          />
          />
        </div>
        <div class="search_btn">
          <button class="btn" @click="goSearch">搜索</button>
        </div>
      </div>

      <div class="navbar">
        <van-tabs
          v-model:active="active"
          color="#1baeae"
          type="card"
          @click="changeTab"
        >
          <van-tab title="推荐" name=""></van-tab>
          <van-tab title="新品" name="new"></van-tab>
          <van-tab title="价格" name="price"></van-tab>
        </van-tabs>
      </div>
    </div>

    <div class="content_">
      <van-pull-refresh
        v-model="isLoading"
        success-text="刷新成功"
        @refresh="onRefresh"
      >
        <van-list
          v-model:loading="loading"
          :finished="finished"
            finished-text=" '搜索想要的商品'"
          @load="onLoad"
          @offset="10"
        >
          <template v-if="goodsList.length > 0">
            <div v-for="item in goodsList" :key="item.goodsId" @click="goDetail(item)">
              <div class="goods_item" >
                <div class="goods_img">
                  <img
                    :src="item.goodsCoverImg"
                    alt=""
                  />
                </div>
                <div class="goods_info">
                  <p class="goods_title">{{item.goodsName}}</p>
                  <p class="goods_size">{{item.goodsIntro}}</p>
                  <span class="goods_price">￥{{item.sellingPrice}}</span>
                </div>
              </div>
            </div>
            </template>

          <img class="empty" v-else src="https://s.yezgea02.com/1604041313083/kesrtd.png" alt="搜索">
        </van-list>
      </van-pull-refresh>
    </div>

  </div>
</template>

<script>
import { useRouter, useRoute } from "vue-router";
import { reactive, toRefs, ref, onMounted} from "vue";
import {throttle} from '../utils/throttle'
import {search} from '../service/goods'
import { Toast } from "vant";
export default {
  setup() {
    const route = useRoute();
    const keyword1 = ref("");
    // const route = useRoute()
    const router = useRouter();
    const state = reactive({
      loading: false,
      finished: false,
      isLoading: false,
      active: 0,
      keyword: keyword1.value || "" ,
      orderBy: "",
      goodsList: [],
      totalPage: 0,
      page: 1,
    });
    const goback = () => {
      router.go(-1);
    };

    onMounted(() => {
      onRefresh()
    })
    
    // 搜索请求数据
    const init = async () => {
      const { categoryId } = route.query;
      state.keyword = keyword1.value;
      if(!state.keyword && !categoryId) {
        Toast.fail('请输入关键词')
        state.finished = true
        state.loading = false
        return
      }

      const {data, data: { list }} = await search({ pageNumber: state.page, goodsCategoryId: categoryId, keyword: state.keyword, orderBy: state.orderBy })
      console.log(data, list);
      state.goodsList = state.goodsList.concat(list)
      state.totalPage = data.totalPage
      state.loading = false;
      // 页数大于请求过来的页数
      // 加载完成
      if (state.page >= data.totalPage) state.finished = true
    };



    const goSearch = throttle(() => onRefresh(), 100)

    // const goSearch = (function() {
    //   let timer = null
    //   state.keyword = keyword1.value;
    //   return function() {
    //     if(timer) clearTimeout(timer)
    //     timer = setTimeout(() => {
    //       onRefresh()
    //     }, 2000)
    //   }
    // })

    const goDetail = (item) => {
      router.push({path:'/detail', query:{id: item.goodsId}})
    }

    const onLoad = () => {
      if(!state.isLoading && state.page < state.totalPage) {
        console.log(state.page, state.totalPage);
        state.page = state.page + 1
      }
      if(state.isLoading) {
        state.goodsList = []
        state.isLoading = false
      }
      init()
    }

    const onRefresh = () => {
      state.isLoading = true
      state.finished = false
      state.loading = true
      state.page = 1
      onLoad()
    }

      const changeTab = (name) => {
      console.log(name);
      state.orderBy = name;
       onRefresh()
    };

    return {
      goback,
      ...toRefs(state),
      changeTab,
      goSearch,
      keyword1,
      goDetail,
      onLoad,
      onRefresh
    };
  },
};
</script>

<style lang="less" scoped>
.search_header {
  z-index: 10000;
  background-color: #fff;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 0;
  font-size: 15px;
  height: 30px;
  line-height: 30px;
  z-index: 10000;
  background-color: #fff;
}
.icon {
  width: 10%;
  margin-left: 5%;
}
.search {
  width: 70%;
}
.search_btn {
  width: 20%;
  margin-left: 2%;
}
.btn {
  height: 30px;
  width: 46px;
  background: #1baeae;
  color: #f7f7f8;
  border: none;
  border-radius: 10px;
}
.input {
  width: 40%;
  background: #f7f7f8;
  border: none;
  // height: 80%;
  height: 20px;
  margin-top: 4px;
  align-items: center;
  position: fixed;
}
.search {
  width: 100%;
  background: #f7f7f8;
  height: 30px;
  border-radius: 30px;
}
.icon_ {
  font-size: 20px;
  margin-left: 20px;
}
.navbar {
  position: fixed;
  top: 50px;
  height: 30px;
  padding: 0 5%;
  width: 90%;
  background-color: #fff;
  z-index: 10000;
}

.content_ {
  margin-top: 80px;
}
.goods_item {
  display: flex;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #dcdcdc;
}
.goods_item .goods_img {
  width: 33.3%;
  height: 20vh;
  margin-left: 5%;
}
.goods_img img {
  width: 100%;
  height: 100%;
}
.goods_info {
  width: 50%;
  margin-left: 10%;
}
.goods_title {
  font-weight: 600;
  font-size: 15px;
  margin: 0;
}
.goods_size {
  color: #dcdcdc;
}
.goods_price {
  font-size: 16px;
}
.selectActive {
  color: #fff;
  background: #1baeae;
}
.search_content {
  z-index: 10000;
  background-color: #fff;
}
.van-tabs {
  z-index: 10000;
  // position: fixed;
  // display: block;
}
.empty{
  width: 150px;
  height: 150px;
  padding: 50px 50%;
  transform: translateX(-75px);
}
</style>